import React from 'react';
import ReactDOM from 'react-dom';
/* 
  ref 可以用来获取DOM元素或者类组件(不能用来获取函数式组件)
   ref ='xxx'  this.refs.xxx 废弃 跟 VUE完全一致
  
   createRef  最新
    eee=React.createRef()  ref={this.eee}   this.eee.current

  ref={(el)=>{this.xxx=el}}   this.xxx

  Context 上下文 就是父组件提供一些属性 那么所有的后代组件都可以获取的到

  老版的上下文 ： getChildContext

*/
const MyContext = React.createContext()// 创造一个上下文
const MyContext2 = React.createContext()// 创造一个上下文

class GrandSon extends React.Component {
  static contextType = MyContext
  render() {
    console.log(this.context)
    return <h3>孙子组件</h3>
  }
}

class Child extends React.Component {
  static contextType = MyContext
  fn2 = () => { }
  render() {
    console.log(this.context)
    return <>
      child
      <GrandSon />
    </>
  }
}
class App extends React.Component {
  static contextType = MyContext2
  state = {
    eee: React.createRef(),
    name: "珠峰"
  }
  rrr = React.createRef()
  fn = () => {
    console.log(this.refs.qqq)
    console.log(this.rrr)
    console.log(this.state.eee)
    console.log(this.ttt)
  }
  render() {
    return <MyContext.Provider value={{ ...this.state, ...this.context }}>
      <div className=''>
        <h1 ref='qqq' id='xxx'>hello</h1>
        <h1 ref={this.rrr}>hello2</h1>
        <h1 ref={this.state.eee}>hello3</h1>


        <h1 ref={(el) => { this.ttt = el }}>hello4</h1>
        <Child ref='www' />
        <button onClick={this.fn}>按钮</button>
      </div>
    </MyContext.Provider >;
  }
}

ReactDOM.render(
  <MyContext2.Provider value={{ qqq: 123 }}><App /></MyContext2.Provider>
  , document.getElementById('root'))